<script setup>
import {reactive} from 'vue'
// import HelloWorld from './components/HelloWorld.vue'
import txImg from './assets/images/tx.gif'
import {Greet} from '../wailsjs/go/main/App'
import { onMounted } from 'vue'
import {
    PieChartOutlined,
    BarChartOutlined,
    DotChartOutlined,
    LineChartOutlined} from '@ant-design/icons-vue';

onMounted(() => {
    tabClick(0)
})
const data = reactive({
    activeKey: 0,
    image: [
        "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png",
        txImg,
        "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png",
        txImg,
        "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png",
    ],
    hotData: {
        0: [],
        1: [],
        2: [],
        3: []
    },
    loading: false
})

function handleMouse(e) {
    // e.preventDefault();
}

function tabClick(index) {
    data.loading = true
    Greet(index).then(result => {
        console.log(result)
        data.loading = false
        data.hotData[index] = result
    })
}

function urlClick(url) {
    window.runtime.BrowserOpenURL(url)
    return false
}

</script>

<template>
  <div style="width: 100%; height: 100%;overflow: hidden;padding-bottom: 200px" @contextmenu="handleMouse">
      <div style="text-align: center">
          <a-image :width="200"
                   :src="data.image[data.activeKey]"/>
      </div>

      <div style="padding: 10px;overflow: auto;height: 100%;">
          <a-tabs v-model:activeKey="data.activeKey" type="card" @tabClick="tabClick">
              <a-tab-pane :key="0">
                  <template  #tab>
                <span>
                  <pie-chart-outlined />
                  百度
                </span>
                  </template>
                  <a-list item-layout="horizontal" :data-source="data.hotData[0]" rowKey="sort" :loading="data.loading">
                      <template #renderItem="{ item }">
                          <a-list-item>
                              <a-list-item-meta :description="item.desc">
                                  <template #title>
                                      <a href="javascript:" @click="urlClick(item.url)">{{ item.title }}</a>
                                  </template>
                                  <template #avatar>
                                      <a-avatar v-if="item.sort < 3" style="background-color: red">{{ item.sort + 1 }}</a-avatar>
                                      <a-avatar v-else-if="item.sort >=3 && item.sort < 6" style="background-color: #f56a00">{{ item.sort + 1 }}</a-avatar>
                                      <a-avatar v-else-if="item.sort >=6 && item.sort < 9" style="background-color: #c8b50eff">{{ item.sort + 1 }}</a-avatar>
                                      <a-avatar v-else>{{ item.sort + 1 }}</a-avatar>
                                  </template>
                              </a-list-item-meta>
                              <div>热度:
                                  <span v-if="item.sort < 3" style="color: red">{{ item.hot }}</span>
                                  <span v-else-if="item.sort >=3 && item.sort < 6" style="color: #f56a00">{{ item.hot }}</span>
                                  <span v-else-if="item.sort >=6 && item.sort < 9" style="color: #c8b50eff">{{ item.hot }}</span>
                                  <span v-else>{{ item.hot }}</span>
                              </div>
                          </a-list-item>
                      </template>
                  </a-list>
              </a-tab-pane>
              <a-tab-pane :key="1">
                  <template  #tab>
                <span>
                  <bar-chart-outlined />
                  微博
                </span>
                  </template>
                  <a-list item-layout="horizontal" :data-source="data.hotData[1]" rowKey="sort" :loading="data.loading">
                      <template #renderItem="{ item }">
                          <a-list-item>
                              <a-list-item-meta :description="item.desc">
                                  <template #title>
                                      <a href="javascript:" @click="urlClick(item.url)">{{ item.title }}</a>
                                  </template>
                                  <template #avatar>
                                      <a-avatar v-if="item.sort < 3" style="background-color: red">{{ item.sort + 1 }}</a-avatar>
                                      <a-avatar v-else-if="item.sort >=3 && item.sort < 6" style="background-color: #f56a00">{{ item.sort + 1 }}</a-avatar>
                                      <a-avatar v-else-if="item.sort >=6 && item.sort < 9" style="background-color: #c8b50eff">{{ item.sort + 1 }}</a-avatar>
                                      <a-avatar v-else>{{ item.sort + 1 }}</a-avatar>
                                  </template>
                              </a-list-item-meta>
                              <div>热度:
                                  <span v-if="item.sort < 3" style="color: red">{{ item.hot }}</span>
                                  <span v-else-if="item.sort >=3 && item.sort < 6" style="color: #f56a00">{{ item.hot }}</span>
                                  <span v-else-if="item.sort >=6 && item.sort < 9" style="color: #c8b50eff">{{ item.hot }}</span>
                                  <span v-else>{{ item.hot }}</span>
                              </div>
                          </a-list-item>
                      </template>
                  </a-list>
              </a-tab-pane>
              <a-tab-pane :key="2">
                  <template  #tab>
                <span>
                  <dot-chart-outlined />
                  头条
                </span>
                  </template>
                  <a-list item-layout="horizontal" :data-source="data.hotData[2]" rowKey="sort" :loading="data.loading">
                      <template #renderItem="{ item }">
                          <a-list-item>
                              <a-list-item-meta :description="item.desc">
                                  <template #title>
                                      <a href="javascript:" @click="urlClick(item.url)">{{ item.title }}</a>
                                  </template>
                                  <template #avatar>
                                      <a-avatar v-if="item.sort < 3" style="background-color: red">{{ item.sort + 1 }}</a-avatar>
                                      <a-avatar v-else-if="item.sort >=3 && item.sort < 6" style="background-color: #f56a00">{{ item.sort + 1 }}</a-avatar>
                                      <a-avatar v-else-if="item.sort >=6 && item.sort < 9" style="background-color: #c8b50eff">{{ item.sort + 1 }}</a-avatar>
                                      <a-avatar v-else>{{ item.sort + 1 }}</a-avatar>
                                  </template>
                              </a-list-item-meta>
                              <div>热度:
                                  <span v-if="item.sort < 3" style="color: red">{{ item.hot }}</span>
                                  <span v-else-if="item.sort >=3 && item.sort < 6" style="color: #f56a00">{{ item.hot }}</span>
                                  <span v-else-if="item.sort >=6 && item.sort < 9" style="color: #c8b50eff">{{ item.hot }}</span>
                                  <span v-else>{{ item.hot }}</span>
                              </div>
                          </a-list-item>
                      </template>
                  </a-list>
              </a-tab-pane>
              <a-tab-pane :key="3">
                  <template  #tab>
                <span>
                  <line-chart-outlined />
                  知乎
                </span>
                  </template>
                  <a-list item-layout="horizontal" :data-source="data.hotData[3]" rowKey="sort" :loading="data.loading">
                      <template #renderItem="{ item }">
                          <a-list-item>
                              <a-list-item-meta :description="item.desc">
                                  <template #title>
                                      <a href="javascript:" @click="urlClick(item.url)">{{ item.title }}</a>
                                  </template>
                                  <template #avatar>
                                      <a-avatar v-if="item.sort < 3" style="background-color: red">{{ item.sort + 1 }}</a-avatar>
                                      <a-avatar v-else-if="item.sort >=3 && item.sort < 6" style="background-color: #f56a00">{{ item.sort + 1 }}</a-avatar>
                                      <a-avatar v-else-if="item.sort >=6 && item.sort < 9" style="background-color: #c8b50eff">{{ item.sort + 1 }}</a-avatar>
                                      <a-avatar v-else>{{ item.sort + 1 }}</a-avatar>
                                  </template>
                              </a-list-item-meta>
                              <div>热度:
                                  <span v-if="item.sort < 3" style="color: red">{{ item.hot }}</span>
                                  <span v-else-if="item.sort >=3 && item.sort < 6" style="color: #f56a00">{{ item.hot }}</span>
                                  <span v-else-if="item.sort >=6 && item.sort < 9" style="color: #c8b50eff">{{ item.hot }}</span>
                                  <span v-else>{{ item.hot }}</span>
                              </div>
                          </a-list-item>
                      </template>
                  </a-list>
              </a-tab-pane>
          </a-tabs>
      </div>

  </div>

</template>

<style>
.ant-layout-header {
    background-color: #7cb305;
}
</style>
